<script setup lang="ts">
import { NCard, NAvatar, NSwitch, NSpace, NDivider, NText, NButton } from 'naive-ui'
import ThemeSwitch from '@/components/ThemeSwitch.vue'
import LangSelector from '@/components/LangSelector.vue'
import InfoItem from '@/components/InfoItem.vue';
</script>

<template>
  <n-card>
    <n-space>
      <n-avatar circle size="large"></n-avatar>
      <n-space vertical>
        <p>用户名</p>
        <p>身份</p>
      </n-space>
    </n-space>
  </n-card>
  <n-card title="设置">
    <n-space justify="space-between" align="center">
      <p>主题</p>
      <ThemeSwitch />
    </n-space>
    <NDivider />
    <n-space justify="space-between" align="center">
      <p>语言</p>
      <LangSelector />
    </n-space>
    <NDivider />
    <n-space justify="space-between" align="center">
      <p>服务器地址</p>
      <NButton text disabled>http://localhost:8888</NButton>
      <NButton text>设置</NButton>
    </n-space>
    <NDivider />
  </n-card>
  <n-card title="关于">
    <InfoItem title="技术支持" value="xcx"/>
    <InfoItem title="版本" value="1.0"/>
    <InfoItem title="更多" value="">
      <RouterLink to="/about/more">
        <n-text type="primary">详情</n-text>
      </RouterLink>
    </InfoItem>
  </n-card>
</template>

<style scoped>
</style>
